import { Form, Input,Select } from 'antd';
import { useComponentsStore } from '../../stores/components';
import { useComponentConfigStore } from '../../stores/component-config';
import { useEffect } from 'react';
import type {ComponentSetter} from '../../stores/component-config'
export default function ComponentAttr() {
    const { curComponent, curComponentId, updateComponentProps } = useComponentsStore()
    const { componentConfig } = useComponentConfigStore()

    const [form] = Form.useForm();
    //回显
    useEffect(() => {
        const data = form.getFieldsValue()//获取输入框的值
        form.setFieldsValue({ ...data, ...curComponent?.props })//添加默认属性值
    }, [curComponent])
    if (!curComponent || !curComponentId) {
        return null
    }
    function renderFormElement(setter: ComponentSetter) {
        const {type,options} = setter
        if(type === 'select'){
            return <Select options={options} />
        }
        else if(type === 'input'){
            return <Input />
        }
    }
    const valeChange = (values: any) => {
        console.log(values)
    }
    return (
        // input框输入值时触发
        <Form form={form} onValuesChange={valeChange} labelCol={{ span: 8 }} wrapperCol={{ span: 14 }}>
            <Form.Item label="组件Id">
                {/* 默认不能输入 */}
                <Input disabled value={curComponentId} />
            </Form.Item>


            <Form.Item label="组件名称">
                <Input disabled value={curComponent.name} />
            </Form.Item>


            <Form.Item label="组件描述">
                <Input disabled value={curComponent.desc} />
            </Form.Item>
            {/* 当前被选中的组件的特定的允许被修改的属性 */}
            {
                componentConfig[curComponent.name].setter?.map(setter => {
                    return (
                        <Form.Item name={setter.name} label={setter.label} key={setter.name}>
                            {/* 判断不同类型，分别渲染 */}
                            {renderFormElement(setter)}
                        </Form.Item>
                    )
                })
            }
        </Form >
    )
}
